前端Server

2023-04-08 09:09| 来源: 网络整理| 查看: 265

转自：http://www.ruanyifeng.com/blog/2017/05/server-sent_events.html

严格地说，HTTP 协议无法做到服务器主动推送信息。但是，有一种变通方法，就是服务器向客户端声明，接下来要发送的是流信息（streaming）。

也就是说，发送的不是一次性的数据包，而是一个数据流，会连续不断地发送过来。这时，客户端不会关闭连接，会一直等着服务器发过来的新的数据流，视频播放就是这样的例子。本质上，这种通信就是以流信息的方式，完成一次用时很长的下载。

SSE 就是利用这种机制，使用流信息向浏览器推送信息。

EventSource1.介绍

EventSource 是服务器推送的一个网络事件接口。一个 EventSource 实例会对 HTTP 服务开启一个持久化的连接，以text/event-stream 格式发送事件，会一直保持开启直到被要求关闭。

一旦连接开启，来自服务端传入的消息会以事件的形式分发至你代码中。如果接收消息中有一个事件字段，触发的事件与事件字段的值相同。如果没有事件字段存在，则将触发通用事件。

与 WebSockets,不同的是，服务端推送是单向的。数据信息被单向从服务端到客户端分发。当不需要以消息形式将数据从客户端发送到服务器时，这使它们成为绝佳的选择。例如，对于处理社交媒体状态更新，新闻提要或将数据传递到客户端存储机制（如 IndexedDB 或 Web 存储）之类的，EventSource 无疑是一个有效方案。

// SSE的API在EventSource对象上 // 可以使用 if('EventSource' in window) 判断浏览器是否支持SSE // 建立SSE连接，直接如下创建EventSource实例，支持跨越 var source = new EventSource("http://127.0.0.1:9988/createSse",{withCredentials: true}); // EventSource.readyState代表连接状态，有以下三种情况 // 0 —> 连接还未建立，或者正在断线重连 // 1 -> 连接已建立，可以接受数据 // 2 -> 连接已关闭或请求错误 var div = document.getElementById("page"); // 连接创建成功的回调事件 source.onopen = function (event) { div.innerHTML += "

Connection open ...

"; }; // 连接创建失败的回调事件 source.onerror = function (event) { div.innerHTML += "

Connection close.

"; }; // 自定义事件，服务端返回时设置event字段为自定义事件名称 source.addEventListener("connecttime", function (event) { div.innerHTML += "

Start time: " + event.data + "

"; }, false ); // 接受到数据的回调事件，event未特殊设置时，默认是message source.onmessage = function (event) { div.innerHTML += "

message event: " + event.data + "

"; }; // 关闭连接 source.close();

相关文档：https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource

2.服务端

服务端返回响应头必须包含以下header ：

Content-Type: text/event-steam // 第一行的Content-Type必须指定为text/event-steam Cache-Control: no-cache Connection: keep-alive

服务器返回的数据是由若干个的message组成，每个message用nn分割（因为是传输的数据格式必须是文本型）。每个message内容是[field]：valuen

field有四种情况id、event(type)、data、retry

id 为每个返回数据的唯一标识，浏览器用lastEventId读取id，一旦连接断开，浏览器会从新发送http请求，带有特殊请求头Last-Event-Id，代表断开时的id，用于建立重新连接，属于一种重连的同步机制。data 数据内容一般放于data字段。event(type)：消息类型，一般默认为message，服务端可以自定义，前端用addEventListener()监听。retry：代表服务器重新发送请求的间隔时间。PHP服务端实现

实际业务场景中，需要对PHP脚本执行时间或者TCP连接时间，进行相关的配置

【本文地址】

公司简介

联系我们